<template>
  <el-table
    ref="multipleTableRef"
    :data="baseData"
    style="width: 100%"
    height= "95%"
    @selection-change="handleSelectionChange"
    :stripe = true
    @select = "selectedData"
  >
    <el-table-column type="selection" width="55" />
    <el-table-column label="Date" width="120">
      <template #default="scope">{{ scope.row.date }}</template>
    </el-table-column>
    <el-table-column property="goodsId" label="排名" width="180" />
    <el-table-column property="goodTime" label="下单时间" width="180" />
    <el-table-column property="goodName" label="姓名" />
    <el-table-column property="goodAddress" label="地址" />
    <el-table-column property="goodNum" label="成交数量" />
    <el-table-column property="goodPrice" label="成交金额" />
    <el-table-column property="goodWay" label="支付方式" />
  </el-table>
  <div style="margin-top: 20px" class="top">
    <el-button @click="toggleSelection([baseData[0],baseData[2],baseData[4],baseData[6]])"
      >修改</el-button
    >
    <el-button @click="toggle">删除</el-button>
  </div>

  <div class="mmi"> 
     <el-pagination 
        background 
        layout = "prev, pager, next" 
        :total = count
        :page-size = size
        @current-change="handleCurrentChange"
        /></div>
</template>
<script>
import {ref,onMounted,} from 'vue';
import datas from '@/mock1/index.js';
import mitt from '../../../../../mock1/mitt';

export default {
 
  setup() {
    const size = ref(13);
    const current = ref(1);
    const count = ref();
    const starTime = ref();
    const endTime = ref();
    const baseData = ref([]);
    // const arr3 = ref([]);
     onMounted(()=>{
      ress();
     }
      )
      mitt.on('msg',(res)=>{
                 starTime.value = res.d;
                 endTime.value = res.f;
                 ress(size.value,current.value,starTime.value,endTime.value);
      })
   const ress= async(size,current,starTime,endTime)=>{
    const res = await datas.getData({
          size,
          current,
          starTime,
          endTime
        });
      
        if(res.status === 0){
          // console.log('res的数据',res);
          baseData.value = res.list
          count.value = res.count
        }
   }  

// const multipleTableRef = ref()
// const multipleSelection = ref([])
// const toggleSelection = (rows) => {
//     console.log("rows",rows);
//   if (rows) {
//     rows.forEach((row) => {
//       multipleTableRef.value.toggleRowSelection(row, undefined)
//     })
//   } else {
//     multipleTableRef.value.clearSelection()
//   }
// }


const handleCurrentChange=(val)=>{
  current.value = val
  if(starTime.value){
   ress(size.value,current.value,starTime.value,endTime.value)
  }else{
   ress(size.value,current.value)
  }
}
  const selectedData = (selection)=>{
     console.log("selection",selection);
 const  arr3 = selection.map(el=>el.goodsId);
   console.log(arr3);
       datas.removeData({arr3:arr3});

       ress(size.value,current.value,starTime.value,endTime.value)
  }
  // const toggle =()=>{
       
  // }
    return {
    baseData,
    // toggleSelection,
    // multipleTableRef,
    // multipleSelection,
    size,
    current,
    count,
    handleCurrentChange,
    selectedData,
    // toggle
   
    }
  },
}
</script>
<style lang="less" scoped>
.top{
  position: absolute;
  top: -63px;
  right: 50px;
// z-index: 122222;
}
.mmi{
  width: 400px;
   margin: 0 auto;
}
</style>